Web Development API Routes এবং SSR টেস্টিং গাইড ও নোট

Next.js একটি পূর্ণাঙ্গ ফ্রেমওয়ার্ক, যা API routes এবং SSR (Server-Side Rendering) এর জন্য সহজ ও শক্তিশালী সমাধান প্রদান করে। এই দুটি ফিচার ডেভেলপারদের ডাইনামিক ওয়েবসাইট এবং অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। Next.js এ API routes ব্যবহার করে সার্ভার সাইড ফাংশনালিটি বাস্তবায়ন করা এবং SSR টেস্টিং এর মাধ্যমে আপনার রেন্ডারিং লজিক পরীক্ষা করা যেতে পারে।

এখানে আমরা দেখবো কিভাবে Next.js এ API Routes তৈরি করা এবং SSR টেস্টিং করা যায়।

১. Next.js API Routes

Next.js এ API Routes ব্যবহার করে আপনি সহজেই সার্ভার সাইড API তৈরি করতে পারেন। API Routes কেবল pages/api ডিরেক্টরির মধ্যে ফাইল তৈরি করে তৈরি করা হয়। প্রতিটি ফাইল একটি HTTP রিকোয়েস্ট হ্যান্ডল করে এবং যেকোনো ধরনের API ফাংশনালিটি সরবরাহ করতে পারে।

API Route তৈরি করা

Example: একটি সিম্পল API Route তৈরি করা যা একটি GET রিকোয়েস্টের মাধ্যমে ডেটা রিটার্ন করবে।

1. API Route তৈরি করুন: প্রথমে pages/api/posts.js নামে একটি ফাইল তৈরি করুন।

   // pages/api/posts.js
   
   export default function handler(req, res) {
     if (req.method === 'GET') {
       res.status(200).json({ message: 'Welcome to the API Route!' });
     } else {
       res.status(405).json({ error: 'Method Not Allowed' });
     }
   }
   

   এখানে, GET রিকোয়েস্ট হলে API একটি সিম্পল মেসেজ রিটার্ন করবে। অন্য যেকোনো HTTP মেথড (যেমন POST, PUT ইত্যাদি) এ 405 Method Not Allowed ত্রুটি ফিরিয়ে দেবে।

2. API রিকোয়েস্ট টেস্ট করা: আপনি API রুটটি একটি ব্রাউজার বা Postman ইত্যাদি টুল ব্যবহার করে টেস্ট করতে পারেন।

   URL: http://localhost:3000/api/posts

২. Server-Side Rendering (SSR) টেস্টিং

Next.js এ Server-Side Rendering (SSR) ব্যবহার করে ডাইনামিক ডেটা রেন্ডার করতে পারেন, যেখানে পেজ লোড হওয়ার সময় ডেটা ফেচ করা হয় এবং সার্ভার সাইডে পেজটি রেন্ডার করা হয়। এই পদ্ধতি SEO এর জন্য গুরুত্বপূর্ণ এবং প্রাথমিক রেন্ডারিং দ্রুত হতে সাহায্য করে।

SSR টেস্টিং

SSR ফিচারটি টেস্ট করার জন্য getServerSideProps ফাংশন ব্যবহার করা হয়, যা প্রতিটি রিকোয়েস্টের সময় ডেটা ফেচ করে এবং তা পেজের সাথে রেন্ডার হয়।

1. SSR ফাংশন তৈরি করুন: প্রথমে getServerSideProps ফাংশন ব্যবহার করে একটি পেজ তৈরি করুন যা API থেকে ডেটা ফেচ করবে।

   // pages/ssr.js
   
   export async function getServerSideProps() {
     const res = await fetch('https://jsonplaceholder.typicode.com/posts');
     const posts = await res.json();
   
     return { props: { posts } };
   }
   
   export default function SSRPage({ posts }) {
     return (
       <div>
         <h1>Server Side Rendered Posts</h1>
         <ul>
           {posts.map(post => (
             <li key={post.id}>{post.title}</li>
           ))}
         </ul>
       </div>
     );
   }
   

   এখানে, getServerSideProps ফাংশনটি API থেকে ডেটা ফেচ করছে এবং পেজটি সার্ভার সাইডে রেন্ডার করার সময় ডেটা পাস করছে।

2. SSR টেস্ট করা: আপনি ব্রাউজারে এই পেজটি দেখতে পারবেন:
   • URL: http://localhost:3000/ssr
   • এই পেজটি সার্ভার সাইডে রেন্ডার হবে এবং ডেটা লোড করার পর ব্রাউজারে দেখানো হবে।

৩. API Route এবং SSR টেস্টিং

Next.js এ আপনি সহজেই API Route এবং SSR ফিচারের টেস্টিং করতে পারেন, তবে এর জন্য কিছু টুলস এবং পদ্ধতি অনুসরণ করা উচিত। সাধারণত, Jest এবং React Testing Library এর মাধ্যমে টেস্টিং করা হয়ে থাকে।

৩.১. API Route টেস্টিং Jest ব্যবহার করে

আপনি API Route টেস্ট করতে Jest ফ্রেমওয়ার্ক ব্যবহার করতে পারেন। এর জন্য আপনাকে supertest প্যাকেজটি ইনস্টল করতে হবে।

1. প্যাকেজ ইনস্টল করুন:

   npm install jest supertest
   

2. API রুট টেস্ট তৈরি করুন: tests ডিরেক্টরিতে একটি টেস্ট ফাইল তৈরি করুন:

   // __tests__/api/posts.test.js
   import request from 'supertest';
   import handler from '../../pages/api/posts';
   
   describe('API Routes', () => {
     it('should return a 200 status and a welcome message', async () => {
       const response = await request(handler).get('/');
       expect(response.status).toBe(200);
       expect(response.body.message).toBe('Welcome to the API Route!');
     });
   
     it('should return 405 for unsupported methods', async () => {
       const response = await request(handler).post('/');
       expect(response.status).toBe(405);
     });
   });
   

3. টেস্ট রান করুন:

   npx jest
   

৩.২. SSR টেস্টিং

SSR টেস্টিংয়ের জন্যও আপনি Jest এবং React Testing Library ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি getServerSideProps ফাংশনটি mock করে ডেটা ফেচ এবং রেন্ডারিং টেস্ট করতে পারেন।

1. SSR টেস্ট ফাইল তৈরি করুন:

   // __tests__/ssr.test.js
   import { render } from '@testing-library/react';
   import SSRPage, { getServerSideProps } from '../pages/ssr';
   
   jest.mock('node-fetch', () => jest.fn());
   
   describe('SSR Page', () => {
     it('should render posts from server-side props', async () => {
       const mockPosts = [{ id: 1, title: 'Test Post' }];
       fetch.mockResolvedValueOnce({
         json: async () => mockPosts,
       });
   
       const { props } = await getServerSideProps();
       const { getByText } = render(<SSRPage {...props} />);
   
       expect(getByText('Test Post')).toBeInTheDocument();
     });
   });
   

2. টেস্ট রান করুন:

   npx jest
   

সারাংশ

Next.js এ API Routes এবং SSR টেস্টিং অত্যন্ত গুরুত্বপূর্ণ, কারণ এগুলো আপনার অ্যাপ্লিকেশনের সার্ভার সাইড কার্যকলাপ এবং ডাইনামিক রেন্ডারিং নিশ্চিত করে। API রাউট এবং SSR ফাংশনগুলোকে টেস্ট করার জন্য Jest এবং supertest ব্যবহার করা যায়, যা আপনাকে সহজেই ডেটা ফেচিং এবং রেন্ডারিং পরীক্ষা করতে সাহায্য করবে।